<template>
    <div class="add_dynamic">
        <div class="lemon-sidebar__scroll dynamic_content">
            <div class="title">{{ $t('cir.朋友圈') }}</div>
            <div class="dynamic_view">
                <!-- 视频发布表单 -->
                <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm">
                    <!-- 动态内容输入区域 -->
                    <el-form-item :label="$t('moment.动态内容')" prop="content">
                        <el-input type="textarea" :placeholder="$t('placeholder.请输入内容')" v-model="ruleForm.content"
                            resize="none" :style="{ height: '200px' }" maxlength="200" show-word-limit>
                        </el-input>
                    </el-form-item>

                    <!-- 视频上传区域 -->
                    <el-form-item :label="$t('moment.添加视频')" v-if="!hasImages">
                        <div class="video_upload">
                            <!-- 视频预览区域 -->
                            <div v-if="ruleForm.video" class="video_preview">
                                <video :src="ruleForm.video" class="video" controls></video>
                                <div class="video_delete" @click="deleteVideo">
                                    <i class="el-icon-delete"></i>
                                </div>
                            </div>

                            <!-- 视频上传组件 -->
                            <el-upload class="uploader" :action="upload_url" :show-file-list="false"
                                accept=".mp4,.avi,.mov,.wmv,.flv,.mkv,.webm" :on-success="uploadVideoSuccess"
                                :before-upload="beforeVideoUpload">
                                <div class="upload_trigger">
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">
                                        {{ $t('moment.添加视频') }}
                                    </div>
                                </div>
                            </el-upload>
                        </div>
                    </el-form-item>

                    <!-- 图片上传区域 -->
                    <el-form-item :label="$t('moment.添加图片')" v-if="!hasVideo">
                        <div class="image_upload">
                            <el-upload class="uploader" :action="upload_url" :file-list="fileList" :limit="limit"
                                list-type="picture-card" multiple accept=".jpg,.jpeg,.png,.gif,.bmp,.webp"
                                :before-upload="beforeImageUpload" :on-exceed="exceedImage"
                                :on-success="uploadImageSuccess" :on-remove="removeImage">
                                <div class="upload_trigger">
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">{{ $t('moment.添加图片') }}</div>
                                </div>
                            </el-upload>
                        </div>
                    </el-form-item>
                </el-form>

                <!-- 底部操作按钮 -->
                <div class="video_footer">
                    <el-button type="primary" @click="submit">{{ $t('mall.立即发布') }}</el-button>
                    <el-button type="primary" plain @click="close">{{ $t('mall.取消') }}</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 上传接口地址
            upload_url: window.BASE_URL + 'common/upload',
            // 图片文件列表（用于el-upload组件显示）
            fileList: [],
            // 已上传的图片URL列表（用于提交接口）
            uploadedImages: [],
            // 图片上传限制数量
            limit: 3,
            // 表单数据
            ruleForm: {
                content: "", // 动态内容（必填）
                images: "", // 图片URL列表（逗号分隔）
                video: "" // 视频URL
            }
        };
    },
    computed: {
        // 判断是否有视频（用于控制图片上传区域的显示）
        hasVideo() {
            return !!this.ruleForm.video;
        },
        // 判断是否有图片（用于控制视频上传区域的显示）
        hasImages() {
            return this.uploadedImages.length > 0;
        },
        // 表单验证规则
        rules() {
            // 动态内容验证规则
            const validateContent = (rule, value, callback) => {
                if (!value || value.trim() === '') {
                    callback(new Error(this.$t('placeholder.请输入内容') || '请输入动态内容'));
                } else {
                    callback();
                }
            };
            return {
                content: [
                    { required: true, validator: validateContent, trigger: 'blur' }
                ]
            };
        }
    },

    methods: {
        /**
         * 提交表单
         * 提交动态内容、图片或视频到后端接口
         */
        async submit() {
            // 验证表单
            this.$refs.ruleForm.validate(async (valid) => {
                if (!valid) return false;

                // 构建提交数据
                let data = {
                    content: this.ruleForm.content // 动态内容（必填）
                };

                // 如果上传了视频，提交视频URL，清空图片
                if (this.ruleForm.video) {
                    data.video = this.ruleForm.video;
                    data.images = "";
                }
                // 如果上传了图片，提交图片URL列表（逗号分隔），清空视频
                else if (this.uploadedImages.length > 0) {
                    data.images = this.uploadedImages.map(img => img.response?.data?.fullurl || img.url).join(",");
                    data.video = "";
                }
                // 如果既没有视频也没有图片，只提交内容
                else {
                    data.images = "";
                    data.video = "";
                }
                await this.$api.momentApi.publish(data);

                this.$message({
                    message: this.$t('mall.发布成功'),
                    type: 'success'
                });
                setTimeout(() => this.$router.back(), 1500);
            });
        },
        close() {
            this.$router.back()
        },

        /**
         * 图片上传前的验证
         * @param {File} file - 要上传的文件对象
         * @returns {Boolean} - 是否允许上传
         */
        beforeImageUpload(file) {
            // 如果已经有视频，不允许上传图片
            if (this.ruleForm.video) {
                this.$message.error(this.$t('moment.已添加视频，无法添加图片') || '已添加视频，无法添加图片');
                return false;
            }
            // 检查文件大小（最大2MB）
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error(`${this.$t('mall.最大')}2MB!`);
            }
            return isLt2M;
        },

        /**
         * 图片上传数量超出限制时的处理
         */
        exceedImage() {
            let msg = `${this.$t('mall.最多可上传')}:${this.limit}`
            this.$message.error(msg);
        },

        /**
         * 图片上传成功回调
         * @param {Object} response - 服务器返回的响应数据
         * @param {File} file - 上传的文件对象
         * @param {Array} fileList - 当前文件列表
         */
        uploadImageSuccess(response, file, fileList) {
            // 将上传成功的图片信息保存到uploadedImages数组
            this.uploadedImages.push({
                uid: file.uid,
                name: file.name,
                url: response?.data?.fullurl || URL.createObjectURL(file.raw),
                response
            });
            // 更新fileList用于el-upload组件显示
            this.fileList = fileList;
            // 清空视频链接（因为图片和视频互斥）
            this.ruleForm.video = "";
        },

        /**
         * 移除图片时的处理
         * @param {File} file - 要移除的文件对象
         * @param {Array} fileList - 移除后的文件列表
         */
        removeImage(file, fileList) {
            // 从uploadedImages数组中移除对应的图片
            const index = this.uploadedImages.findIndex(img => img.uid === file.uid);
            if (index !== -1) {
                this.uploadedImages.splice(index, 1);
            }
            // 更新fileList
            this.fileList = fileList;
        },

        /**
         * 视频上传前的验证
         * @param {File} file - 要上传的文件对象
         * @returns {Boolean} - 是否允许上传
         */
        beforeVideoUpload(file) {
            // 如果已经有图片，不允许上传视频
            if (this.uploadedImages.length > 0) {
                this.$message.error(this.$t('moment.已添加图片，无法添加视频') || '已添加图片，无法添加视频');
                return false;
            }
            // 检查文件大小（最大30MB）
            const maxSize = 30;
            const isLt30M = file.size / 1024 / 1024 < maxSize;
            if (!isLt30M) {
                this.$message.error(this.$t('mall.最大') + `${maxSize}MB!`);
                return false;
            }
            return true;
        },

        /**
         * 删除视频
         * 清空视频链接和相关数据
         */
        deleteVideo() {
            this.ruleForm.video = "";
        },

        /**
         * 视频上传成功回调
         * @param {Object} response - 服务器返回的响应数据
         * @param {File} file - 上传的文件对象
         * @param {Array} fileList - 当前文件列表
         */
        uploadVideoSuccess(response, file, fileList) {
            if (response && response.data && response.data.fullurl) {
                // 保存视频URL到表单数据（如果已有视频则替换）
                this.ruleForm.video = response.data.fullurl;
                // 清空图片列表（因为视频和图片互斥）
                this.uploadedImages = [];
                this.fileList = [];
                this.ruleForm.images = "";
            } else {
                this.$message.error(this.$t('mall.上传失败') || '上传失败');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.add_dynamic {
    min-width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0;
    padding: 24px;
    box-sizing: border-box;
    background: #FCFCFE;
    position: relative;
    overflow: hidden;

    .dynamic_content {
        height: 100%;
        overflow-y: auto;

        .title {
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            padding-bottom: 16px;
        }
    }


    // 表单项样式
    &:deep(.el-form-item) {
        margin-bottom: 8px;

        .el-form-item__label {
            font-size: 14px;
            color: #333333;
        }

        .el-input__inner {
            height: 52px;
            background: #F5F5F5;
        }

        // textarea样式
        .el-textarea__inner {
            height: 200px !important;
            background: #FFFFFF;
        }
    }

    .video_upload,
    .image_upload {

        // 视频上传触发区域
        .upload_trigger {
            width: 150px;
            height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .el-icon-upload {
                color: #333;
                font-size: 32px;
            }

            .el-upload__text {
                height: 32px;
                line-height: 32px;
                font-size: 16px;
            }
        }
    }


    .video_upload {
        width: 100%;
        display: flex;
        align-items: center;

        .uploader {
            width: 150px;
            height: 150px;
        }

        // 视频预览容器
        .video_preview {
            position: relative;
            width: 150px;
            height: 150px;
            border-radius: 8px;
            margin-right: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            background: #000;

            // 视频预览样式
            .video {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            // 删除按钮
            .video_delete {
                position: absolute;
                top: 8px;
                right: 8px;
                width: 32px;
                height: 32px;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s;

                &:hover {
                    background: rgba(255, 0, 0, 0.8);
                    transform: scale(1.1);
                }

                .el-icon-delete {
                    color: #fff;
                    font-size: 18px;
                }
            }
        }

        // 上传组件样式
        &:deep(.el-upload) {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.3s;

            &:hover {
                border-color: #409EFF;
            }
        }
    }

    .image_upload {
        width: 100%;
        display: flex;

        &:deep(.el-upload--picture-card) {
            width: 150px;
            height: 150px;
            border-radius: 6px;
        }

        &:deep(.el-upload-list--picture-card) {
            .el-upload-list__item {
                width: 150px;
                height: 150px;
                border-radius: 6px;
            }
        }
    }

    // 底部按钮区域
    .video_footer {
        padding-top: 20px;
        display: flex;
        justify-content: center;

        .el-button {
            width: 118px;
            height: 32px;
        }
    }
}
</style>